import { Component, OnChanges, Input } from '@angular/core';
import { EChartOption } from 'echarts';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'itmp-traffic-flow',
    templateUrl: './traffic-flow.component.html',
    styleUrls: ['./traffic-flow.component.css']
})
export class TrafficFlowComponent implements OnChanges {
    options: EChartOption;
    @Input() data: [any, any];
    @Input() titletext: String;

    constructor(private translate: TranslateService) {}

    ngOnChanges() {
        const tempTranslate = ['Today', 'Yesterday'];
        const translateData = [];
        tempTranslate.forEach(item => {
            this.translate.get('Data_Visualization.TrafficAnalytics.' + item).subscribe((res: string) => {
                translateData.push(res);
            });
        });
        setTimeout(() => {
            if (!this.data) {
                return;
            }
            this.options = {
                backgroundColor: '#363a70', //背景色
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: translateData,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            //x轴座标文字颜色
                            color: '#fff'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff', //左边线的颜色
                            width: '1' //坐标线的宽度
                        }
                    }
                },
                yAxis: {
                    show: false,
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            //x轴座标文字颜色
                            color: '#fff'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff', //左边线的颜色
                            width: '1' //坐标线的宽度
                        }
                    }
                },
                legend: {
                    data: translateData,
                    textStyle: {
                        color: '#ffffff' //图例颜色
                    }
                },
                color: ['#3D95E7', '#FDD158'],
                series: [
                    {
                        type: 'bar',
                        barWidth: 60,
                        data: [
                            {
                                name: translateData[0],
                                value: this.data[0],
                                itemStyle: {
                                    color: '#3D95E7'
                                },
                                label: {
                                    show: true,
                                    color: '#3D95E7',
                                    position: 'top'
                                }
                            },
                            {
                                name: translateData[1],
                                value: this.data[1],
                                itemStyle: {
                                    color: '#FDD158'
                                },
                                label: {
                                    show: true,
                                    color: '#FDD158',
                                    position: 'top'
                                }
                            }
                        ]
                    }
                ]
            };
        });
    }
}
